<template>
	<div id="slider" class="swipe" style="visibility:visible;">  
	    <div class="swipe-wrap">
	        <div v-for="img in bannerImg">   
	            <img :src="img" width="100%" height="100%" />   
	        </div> 
	    </div>
	    <nav>  
			<ul id="position">  
			  <li class="on"></li>  
			  <li class=""></li>  
			  <li class=""></li>  
			</ul>  
		</nav>
	</div> 
</template>
<script type="text/javascript">
	import Swipe from '../libs/swipe'
	export default {
        replace: true,
        props:['bannerImg'],
        ready(){
        	var bullets = document.getElementById('position').getElementsByTagName('li'); 
			var slider =  
			Swipe(document.getElementById('slider'), {  
			    auto: 5000,  
			    continuous: true,  
			    callback: function(pos) {
			    	var i = bullets.length;  
			        while(i--){  
			            bullets[i].className = ' ';  
			        }  
			        bullets[pos].className = 'on'; 
			    }  
			}); 
        }
    }
</script>
<style lang="stylus">
.swipe {  
    overflow: hidden;  
    visibility: hidden;  
    position: relative;
}  
.swipe-wrap {  
    overflow: hidden;  
    position: relative;  
} 
.swipe-wrap > div {  
    float: left;  
    width: 100%;  
    position: relative;  
}  
#slider {  
    max-width: 100%;/* 设置最大的宽度 */  
    margin: 0px auto; /* 居中对齐 */  
}
#position {
	position:absolute;
	left:45%;
	bottom:.5rem;
    text-align: center;  
    list-style: none;  
    margin: 0;  
    padding: 0  
}  
#position li {  
    display: inline-block;  
    width: .5rem;  
    height: .5rem;  
    border-radius: 50%;  
    background: #fff;    
    margin: 0 2px;
    opacity: 0.7;   
}  
#position li.on {   
    background-color: #e76364;  
} 
</style>